<template>
	<view class="login-container">
		<image src="@/static/icon/logo.png" />
		<view class="title">AI旅游助手</view>
		<view class="subtitle">AI规划，轻松出行</view>
		<view class="button" @click="handleLogin">开启AI智旅</view>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {

		}
	},
	methods: {
		async handleLogin() {
			uni.showLoading({
				title: '登陆中...',
				mask: true
			})
			uni.login({
				provider: 'weixin',
				success: (lres) => {
					console.log(lres);
					uni.request({
						url: 'http://localhost:9090' + '/users/login',
						method: 'POST',
						data: {
							code: lres.code
						},
						success: (res) => {
							console.log(res.data);
							uni.showToast({
								title: '登录成功',
								icon: 'success',
								duration: 2000
							})
							const openid = res.data.data.openid
							const token = res.data.data.token
							uni.setStorageSync('userid', openid)
							uni.setStorageSync('token', token)
							uni.navigateBack()
						},
						fail: (error) => {
							uni.showToast({
								title: '登录失败，请稍后再试',
								icon: 'none',
								duration: 2000
							})
						}
					});
				},
				fail: (error) => {
					console.log(error);
				}
			});
		},
	}
}
</script>

<style lang="scss">
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	background: linear-gradient(to bottom, #7aa9f9, $theme-color);
	color: #fff;

	image {
		width: 48px;
		height: 48px;
		margin-top: 200rpx;
	}

	.title {
		font-size: 52rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.subtitle {
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 600rpx;
		height: 100rpx;
		font-size: 32rpx;
		text-align: center;
		background-color: #fff;
		color: $theme-color;
		border-radius: 233rpx;
		margin-top: 500rpx;
		box-shadow: 0px 3px 15px #00000036;
	}
}
</style>
